<link rel="stylesheet" href="assets/css/appointment.css"/>
<!-- 正文开始 -->
<div class="layui-fluid">
  <div class="layui-card card-box-shadow">
    <div class="layui-card-body">
      <!-- 表格工具栏 -->
      <div class="layui-form toolbar" lay-filter="bugsTbSearchForm">
        <div class="layui-form-item ">
          <div class="layui-inline">
            <label class="layui-form-label w-auto">内容：</label>
            <div class="layui-input-inline mr0">
              <input name="keywords" id="keywords" class="layui-input search_key" type="search" placeholder="内容"/>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label w-auto">性别：</label>
            <div class="layui-input-inline mr0">
              <select name="gender" lay-filter="gender" id="gender" xm-select="gender" lay-verType="tips" placeholder="性别" lay-verify="" lay-search>
                <option value="">请选择</option>
                <option value="1">男</option>
                <option value="2">女</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label w-auto">年龄：</label>
            <div class="layui-input-inline mr0">
              <select name="birthday" lay-filter="birthday" id="birthday" xm-select="birthday" lay-verType="tips" placeholder="年龄" lay-verify="" lay-search>
                <option value="">请选择</option>
                <option value="00-05">00-05</option>
                <option value="95-00">95-00</option>
                <option value="90-95">90-95</option>
                <option value="85-90">85-90</option>
                <option value="80-85">80-85</option>
                <option value="其他">其他</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label w-auto">离异：</label>
            <div class="layui-input-inline mr0">
              <select name="marriage" lay-filter="marriage" id="marriage" xm-select="marriage" lay-verType="tips" placeholder="性别" lay-verify="" lay-search>
                <option value="">请选择</option>
                <option value="未婚">未婚</option>
                <option value="离异">离异</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label w-auto">学历：</label>
            <div class="layui-input-inline mr0">
              <select name="education" lay-filter="education" id="education" xm-select="education" lay-verType="tips" placeholder="性别" lay-verify="" lay-search>
                <option value="">请选择</option>
                <option value="博士">博士</option>
                <option value="研究生">研究生</option>
                <option value="本科">本科</option>
                <option value="大专">大专</option>
                <option value="其他">其他</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label w-auto">公众号显示照片：</label>
            <div class="layui-input-inline mr0">
              <select name="showPhoto" lay-filter="showPhoto" id="showPhoto" xm-select="showPhoto" lay-verType="tips" placeholder="照片" lay-verify="" lay-search>
                <option value="">请选择</option>
                <option value="1">有</option>
                <option value="0">无</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label w-auto">网页隐藏照片:</label>
            <div class="layui-input-inline mr0">
<!--              <input type="checkbox" value="1" name="nopic" id="nopic" title="隐藏照片" checked>-->
              <input type="checkbox" value="1" name="nopic" id="nopic" title="隐藏照片" >
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label w-auto">标签:</label>
            <div class="layui-input-inline mr0">
              <select id="labeled" name="labeled" lay-filter="labeled" lay-verify="" lay-search="">
                <option value="">无</option>
                <option value="有">有</option>
                <option value="优质">优质</option>
                <option value="帅气">帅气</option>
                <option value="多金">多金</option>
                <option value="漂亮">漂亮</option>
                <option value="有才">有才</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <!--                    <button class="layui-btn icon-btn" lay-filter="bugsTbSearch" id="bugsTbSearch" lay-submit>-->
            <button class="layui-btn icon-btn" id="bugsTbSearch" >
              <i class="layui-icon">&#xe615;</i>搜索
            </button>
          </div>
          <div class="layui-inline">
            <button class="layui-btn icon-btn" id="copy">
              <i class="layui-icon">&#xe62e;</i>复制
            </button>
          </div>
        </div>

      </div>
    </div>
  </div>
  <blockquote class="layui-elem-quote" style="margin-top: 10px;">
    <div id="test2"></div>
  </blockquote>
  <div style="display: flex;justify-content: center;" class="" id="page_container"></div>
  <div class="container" id="container"></div>
</div>
<!-- js部分 -->
<script type="text/javascript">
layui.use(['layer', 'form', 'table', 'tableX', 'util', 'admin', 'xmSelect'
  , 'formX', 'dropdown', 'upload', 'setter', 'laydate', 'laypage'
  , 'ClipboardJS'
], function () {
  let $ = layui.jquery;
  let layer = layui.layer;
  let form = layui.form;
  let table = layui.table;
  let tableX = layui.tableX;
  let util = layui.util;
  let admin = layui.admin;
  let formX = layui.formX;
  let setter = layui.setter;
  let xmSelect = layui.xmSelect;
  let laydate = layui.laydate;
  let upload = layui.upload; //得到 upload 对象
  let ClipboardJS = layui.ClipboardJS;
  let laypage = layui.laypage;

  form.render();

  let content = ""
  let clipboard2 = new ClipboardJS('#copy',{
      text: function () {
          return `${content}`
      }
  });
  clipboard2.on('success', function(e) {
      console.log("复制成功！")
      layer.msg("复制成功!", {icon: 1, time: 700});
  });
  clipboard2.on('error', function(e) {
      console.log("当前浏览器不支持此功能，请手动复制。")
  });

  let clipboard3 = new ClipboardJS('.item_copy',{
      text: function (trigger) {
          let con = '#公众号：天上闲人地上仙\n'
          let p = $(trigger).parent().next()
          // con += p.data('txt') +" "+p.children(':eq(0)').text()+" "+p.children(':eq(1)').text() +"\n"
          con += p.text().replace("编号: ", "") +"\n"
          p = p.next()
          // con += p.text() +"\n" //昵称
          p = p.next()
          con += p.text() +"\n"//婚姻
          p = p.next()
          con += p.text() +"\n"//性别
          p = p.next()
          if(p.data('birthday') && p.data('birthday').length>0){
            con += "生日:"+p.data('birthday').substr(0,4) +"\n"//生日
          } else {
            con += p.text() +"\n"//生日
          }
          for (let i = 1; i < 10; i++) {
            p = p.next()
            if (p.text().replace(/\s+/g,'') != '') {
              con += $.trim(p.text()) +"\n";
            }
          }
          return con
      }
  });
  clipboard3.on('success', function(e) {
      layer.msg("复制成功!", {icon: 1, time: 700});
  });
  clipboard3.on('error', function(e) {
      console.log("当前浏览器不支持此功能，请手动复制。")
  });

  $("#bugsTbSearch").click(function() {
      search(current_page,current_limit)
      return false;
  })

  form.on('select(gender)', function(data){
    $("#bugsTbSearch").click();
  });

  form.on('select(birthday)', function(data){
    $("#bugsTbSearch").click();
  });

  form.on('select(education)', function(data){
    $("#bugsTbSearch").click();
  });

  form.on('select(showPhoto)', function(data){
    $("#bugsTbSearch").click();
  });
  form.on('select(marriage)', function(data){
    $("#bugsTbSearch").click();
  });

  let page_count = 0, current_page = 1,current_limit = 5
  admin.req('/appo/appointments/list2', {page: current_page,limit: current_limit}, function (res) {
    page_count = 0
    if (res.code == 0) {
      page_count = res.count
    }
    laypage.render({
      elem: 'page_container',
      count: page_count,
      curr: current_page,
      layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh'],
      limit: current_limit,
      limits: [5, 10, 20, 50, 100, 200],
      jump: function(obj, first){
        //obj包含了当前分页的所有参数，比如：
        // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        // console.log(obj.limit); //得到每页显示的条数
        //首次不执行
        current_page = obj.curr
        current_limit = obj.limit
        search(current_page,current_limit)
        if(!first){
        }
      }
    })
  }, 'get');

  function search(page, limit) {
      $("#container").empty()
      let data = {page, limit}
      if ($("#keywords").val() != "") {
          data.name = $("#keywords").val()
      }
      if ($("#gender").val() != "") {
          data.gender = $("#gender").val()
      }
      if ($("#marriage").val() != "") {
          data.marriage = $("#marriage").val()
      }
      if ($("#birthday").val() != "") {
          data.birthday = $("#birthday").val()
      }
      if ($("#education").val() != "") {
          data.education = $("#education").val()
      }
      if ($("#showPhoto").val() != "") {
          data.showPhoto = $("#showPhoto").val()
      }
      if ($("#labeled").val() != "") {
          data.labeled = $("#labeled").val()
      }
      let nopic = true
      if ($("#nopic").prop("checked") == true) {
          nopic = false
      }
      admin.req('/appo/appointments/list2', data, function (res) {
          content = ""
          if (res.code == 0) {
              page_count = res.count
              $("#test2").html("人数: "+page_count)
              res.data.forEach((c, index, arr) => {
                  // if(index>13) {return false}
                  let gender = c.gender == '1' ? '男' : '女'
                  let onlySon = c.onlySon == '1' ? '独生' : '非独生'
                  let selfSituation = '',selfSituation_copy = '', unExamined = ''
                  if(c.selfSituation){
                    selfSituation = "    <div class=\"mt10\">自身情况: " + c.selfSituation + "</div>\n"
                    selfSituation_copy = "自身情况: " + c.selfSituation + "\n"
                  }

                  let photo = ""
                  if(nopic) {
                    if (c.photo) {
                      let ad = c.photo.split(',')
                      ad.forEach((index2,item2) => {
                        if(index2==''||index2==undefined){return true}
                        photo += "    <div class=\"mt10\">\n" +
                            "        <img class=\"pic\" src=\"" + layui.setter.baseServer + "/file/" + index2 + "\" />\n" +
                            "    </div>"
                      })

                    }
                  }
                  let photoPrivacy = ""
                  if(nopic) {
                    if (c.photoPrivacy) {
                      let ad_privacy = c.photoPrivacy.split(',')
                      ad_privacy.forEach((index2,item2) => {
                        if(index2==''||index2==undefined){return true}
                        photoPrivacy += "    <div class=\"mt10\">\n" +
                            "        <img class=\"pic\" src=\"" + layui.setter.baseServer + "/file/" + index2 + "\" />\n" +
                            "    </div>"
                      })

                    }
                  }
                  if (c.examined == '未审核') {
                    unExamined = 'unExamined'
                  }

                  $("#container").append("<div class=\"items\">" +
                      "<div class=\"avatarcontainer\">" +
                      "<div class=\"item_copy\">复制</div>" +
                      // "                <img class=\"avatar\" src=\"" + c.userAvatar + "\"/>\n" +
                      // "                <div class=\"ml15\">" + c.userNickName + "</div>\n" +
                      "</div>\n" +
                      // "<div class=\"mt10\" data-txt=" + c.name + ">昵称: " + c.name + "\n" +
                      // "        <span class=\"nicknametext\">" + gender + "</span>\n" +
                      // "        <span class=\"nicknametext\">" + c.marriage + "</span>\n" +
                      // "    </div>\n" +
                      "<div class=\"mt10\">编号: " + c.bCode + "</div>\n" +
                      "<div class=\"mt10 "+unExamined+"\">昵称: " + c.name +"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>\n" +
                      "<div class=\"mt10\">婚姻: " + c.marriage + "</div>\n" +
                      "<div class=\"mt10\">性别: " + gender +"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+onlySon+ "</div>\n" +
                      "<div class=\"mt10\" data-birthday=\""+c.birthday+"\">生日: " + c.birthday + "</div>\n" +
                      "<div class=\"mt10\">身高/体重: " + c.height + "/" + c.weight + "</div>" +
                      "<div class=\"mt10\">学历/职业: " + c.education + "/" + c.occupation + "&nbsp;" + c.salary + "万/年</div>\n" +
                      "<div class=\"mt10\">房车: " + c.house + "/" + c.car + "</div>\n" +
                      "<div class=\"mt10\">籍贯: " + c.nativePlace + "</div>\n" +
                      "<div class=\"mt10\">居住: " + c.liveCity + "</div>\n" +
                      "<div class=\"mt10\">爱好: " + c.hobby + "</div>\n" +
                      selfSituation +
                      "<div class=\"mt10\">父母情况: " + c.parentsSituation + "</div>\n" +
                      "<div class=\"mt10\">择偶要求: " + c.requirements + "</div>\n" +
                      photo +
                      photoPrivacy +
                      "</div>\n"
                  )
                  content += "\n"
                      + "编号: " + c.bCode +"\n"
                      + "婚姻: " + c.marriage +"\n"
                      + "性别: " + gender + "  " + onlySon +"\n"
                      + "生日: " + c.birthday +"\n"
                      + "身高/体重: " + c.height + "/" + c.weight +"\n"
                      + "学历/职业: " + c.education + "/" + c.occupation + "" + c.salary + "万/年\n"
                      + "房车: " + c.house + "/" + c.car + "\n"
                      + "籍贯: " + c.nativePlace + "\n"
                      + "居住: " + c.liveCity + "\n"
                      + "爱好: " + c.hobby + "\n"
                      + selfSituation_copy
                      + "父母情况: " + c.parentsSituation + "\n"
                      + "择偶要求: " + c.requirements + "\n"
                  if(index!=res.data.length - 1) {
                      content += "\n\n"
                  }
              })
              for(let i = 0; i < 7; i ++) {
                  $("#container").append("<div class=\"items\" style='background-color: transparent;'>" +
                      "            </div>\n"
                  )
              }
          }
      }, 'get');
  }

});
</script>
